<template>
  <div>
    <Header></Header>
    <div class="container layout layout-margin-top">

      <!--      面包屑导航-->
      <ol class="breadcrumb">
        <li><a href="/courses/">全部课程</a></li>

        <li>

          <a :href="'/courses/?tag='+course.tag.id">{{course.tag.title}}</a>

        </li>

        <li class="active">
          <a>
            {{course.title}}
          </a>
        </li>
      </ol>

      <div class="row">
        <div class="col-md-9 layout-body">


          <div class="side-image side-image-mobile">
            <img src="https://dn-simplecloud.shiyanlou.com/ncn1.jpg?imageView2/0/h/300">
          </div>
          <div class="content course-infobox">
            <div class="clearfix course-infobox-header">
              <h4 class="pull-left course-infobox-title">

                <span>{{course.title}}</span>

              </h4>
              <div class="pull-right course-infobox-follow" data-follow-url="/courses/1/follow"
                   data-unfollow-url="/courses/1/unfollow">
                <span class="course-infobox-followers">{{course.attention_num}}</span>
                <span>人关注</span>

                <i v-if="follow" class="fa fa-star" @click="change_follow"></i>
                <i v-else class="fa fa-star-o" @click="change_follow"></i>

              </div>
            </div>
            <div class="clearfix course-infobox-body">
              <div class="course-infobox-content">
                <p>{{course.desc}}</p>

              </div>
              <!--              进度条-->
              <div class="course-infobox-progress">

                <!--  sections  =>  [1,2,3,4]-->
                <div v-for="sec in sections" :key="sec"
                     style="margin-right: 1px"
                     :class="is_finished(sec)?'course-progress-finished':'course-progress-new'"></div>

                <span>（{{study_sections.length}}/{{sections.length}}）</span>
              </div>


              <div class="pull-right course-infobox-price">

              </div>

            </div>

            <div class="clearfix course-infobox-footer">

              <div class="pull-right course-infobox-learned">{{course.study_num}} 人学过</div>
            </div>

          </div>
          <div class="content">
            <ul class="nav nav-tabs" role="tablist">

              <li role="presentation" :class="{active:tab=='chapter'}">
                <a @click="tab='chapter'">课程列表</a>
              </li>

              <li role="presentation" :class="{active:tab=='comments'}">
                <a @click="tab='comments'">课程评论({{comments.length}})</a>
              </li>
            </ul>
            <div class="tab-content">
              <!--              课程列表-->
              <div class="tab-pane" :class="{active:tab=='chapter'}">
                <div v-for="chapter in course.chapter_set" :key="chapter.id">
                  <div class="lab-item ">
                    <h4 class="lab-item-title">{{chapter.title}}</h4>
                  </div>
                  <div class="lab-item change_curse" v-for="section in chapter.section_set" :key="section.id">
                    <div class="lab-item-status">
                      <img src="/static/img/lab-not-ok.png">
                    </div>
                    <div class="lab-item-index"><a :href="'/courses/section/?sid='+section.id">{{section.title}}</a>
                    </div>
                  </div>
                </div>
              </div>
              <!--              课程评论-->
              <div class="tab-pane course-comment" :class="{active:tab=='comments'}">
                <div class="comment-box">
                  <div class="comment-form">

                    <div v-if="uid" class="comment-form-unlogin">
                      <textarea v-model="comment" style="height: 134px; width: 769px"></textarea>
                    </div>
                    <div v-else class="comment-form-unlogin">
                      请
                      <a href="#sign-modal" data-toggle="modal" data-sign="signin"
                         data-next="/courses/1"> 登录 </a>
                      后发表评论
                    </div>
                    <div>
                      <span>TO:{{to_nick_name}}</span> <a v-show="to_nick_name" @click="clear_to">X</a>
                      <button style="float: right" @click="send_comment">评论</button>
                    </div>
                  </div>
                  <div class="comment-title">最新评论</div>
                  <div class="comment-list">
                    <div v-for="comment in comments" style="margin-bottom: 5px;">
                      <img style="width: 25px" :src="comment.user.img" alt="">{{comment.user.nick_name}}
                      <span v-if="comment.to">&nbsp;回复:<img style="width: 25px" :src="comment.to.user.img" alt="">
                        {{comment.to.user.nick_name}}</span>:{{comment.content}}&nbsp;&nbsp;{{comment.u_time |
                      time_to_before}}
                      <a @click="set_to(comment.id, comment.user.nick_name)">回复</a>
                    </div>
                  </div>
                  <div class="pagination-container"></div>
                </div>
              </div>
            </div>
          </div>


        </div>
        <div class="col-md-3 layout-side">

          <div class="side-image side-image-pc">
            <img :src="course.img">
          </div>


          <div class="sidebox mooc-teacher">
            <div class="sidebox-header mooc-header">
              <h4 class="sidebox-title">课程教师</h4>
            </div>
            <div class="sidebox-body mooc-content">
              <a href="" target="_blank">
                <img :src="course.teacher.img">
              </a>
              <div class="mooc-info">
                <div class="name"><strong>{{course.teacher.nick_name}}</strong></div>

                <div class="courses">共发布过<strong>{{course.teacher.course_num}}</strong>门课程</div>
              </div>
              <div class="mooc-extra-info">
                <div class="word long-paragraph">
                  {{course.teacher.desc}}
                </div>
              </div>
            </div>
            <div class="sidebox-footer mooc-footer">
              <a :href="'/courses/search/?tid='+course.teacher.id" target="_blank">查看老师的所有课程</a>
            </div>
          </div>


          <div class="side-image">
            <a href="/vip" target="_blank">
              <img src="/static/img/banner-vip.png">
            </a>
          </div>


          <div class="sidebox adv-course">
            <div class="sidebox-header">
              <h4 class="sidebox-title">进阶课程</h4>
            </div>
            <div class="sideobx-body course-content">

              <a href="/courses/204">实用Linux Shell编程</a>

              <a href="/courses/2">Vim编辑器</a>

              <a href="/courses/68">Linux命令实例练习</a>

            </div>
          </div>


        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'

  export default {
    name: "Detail",
    components: {Header, Footer},
    data() {
      return {
        uid: '', // 用户id
        username: '',  // 1.实现前端获取uid,  2.传用户名, 自己实现apiview,   3.获取用户的所有follow课程
        cid: '',  // 课程id
        follow: false,
        course: {
          attention_num: 0,
          desc: "使用python解数学方程",
          fee: 1,
          id: 4,
          img: "http://127.0.0.1:8000/media/course/111.png",
          pub_time: "2020-12-02T03:56:18Z",
          status: 1,
          study_num: 333,
          tag: {id: 1, title: "Python"},
          teacher: {id: 1, username: "admin", desc: ''},
          title: "使用python解数学方程",
          chapter_set: [
            {
              course: 2,
              id: 1,
              title: "第一章:Linux系统简介",
              section_set: [
                {
                  id: 1,
                  title: "第1节:基本概念及操作",
                  video: "http://127.0.0.1:8000/media/video/1.mp4",
                  play_num: 0
                }],
            }
          ]
        },
        sections: [], // 小节id列表   [11,12,13,14,15]
        study_sections: [], // 已经学过的小节id列表  [11,12]
        comments: [
          {
            "id": 2,
            "user": {
              "id": 5,
              "nick_name": null,
              "img": null
            },
            "to": {
              "id": 1,
              "user": {
                "id": 1,
                "nick_name": "猪八戒",
                "img": "http://127.0.0.1:8000/media/user/iShot2020-12-03_15.11.24.png"
              },
              "c_time": "2020-12-04T07:03:54.424175Z",
              "u_time": "2020-12-04T07:03:54.424249Z",
              "content": "课程不错",
              "to": null
            },
            "c_time": "2020-12-04T07:05:50.347799Z",
            "u_time": "2020-12-04T07:05:50.347872Z",
            "content": "课程还行"
          }
        ],
        tab: 'chapter',  // chapter,展示章节   comments, 展示评论
        to_nick_name: '',  // 回复哪个人
        to_comment_id: '', // 回复哪个评论
        comment:'',   // 评论内容
      }
    },
    mounted() {
      debugger
      this.cid = this.$route.query.cid
      this.username = localStorage.username
      this.uid = localStorage.uid
      this.get_course()
      this.get_follow()
      this.get_study_sections()
      this.get_comments()
    },
    methods: {
      get_course() {
        // /course/4/
        this.axios.get('/course/' + this.cid + '/').then(res => {
          // debugger
          this.course = res.data
          this.course.chapter_set.map(chapter => {
            chapter.section_set.map(section => {
              this.sections.push(section.id)
            })
          })

        })
      },
      change_follow() {
        this.axios.post('change_follow/', {
          cid: this.cid,
          type: this.follow ? '2' : '1'  // 1, 关注   2. 取消关注
        }).then(res => {
          // debugger
          if (res.data.code == '0') {
            this.follow = !this.follow
            this.course.attention_num += this.follow ? +1 : -1  // 如果现在的follow 关注, +1,  否则就-1
          }
        })
      },
      get_follow() {
        this.axios.get('change_follow/', {
          params: {
            username: this.username,
            cid: this.cid
          }
        }).then(res => {
          // debugger
          if (res.data.count > 0) {
            this.follow = true
          } else {
            this.follow = false
          }
        })
      },
      get_study_sections() {
        this.axios.get('/user_course_section/?cid=' + this.cid).then(res => {
          this.study_sections = res.data.section_ids
        })
      },
      is_finished(sid) {
        // debugger
        // 'course-progress-finished','course-progress-new'
        if (this.study_sections.find(i => i == sid)) {
          return true
        } else {
          return false
        }
      },
      get_comments() {
        //http://127.0.0.1:8000/course_comment/?course=2
        this.axios.get('/course_comment/?course=' + this.cid).then(res => {
          this.comments = res.data
        })
      },
      set_to(cid, nick_name) {
        this.to_nick_name = nick_name
        this.to_comment_id = cid
      },
      clear_to(){
        this.to_nick_name = ''
        this.to_comment_id = ''
      },
      send_comment(){
        this.axios.post('/send_comment/',{
          cid:this.cid,
          content: this.comment,
          to: this.to_comment_id
        }).then(res=>{
          alert(res.data.msg)
          this.get_comments()
        })
      }
    },
    filters: {
      time_to_before(value) {
        '2020-12-04T07:03:54.424249Z'
        // n年前 n月前  n天前  n小时前  n分钟前
        var day_str = value  // 发表时间
        var d = new Date(Date.parse(day_str))  // 发表时间 转换成日期格式
        var now = new Date()  // 现在时间
        if (now.getFullYear() - d.getFullYear() > 0) {
          return (now.getFullYear() - d.getFullYear()) + '年前评论'
        } else if (now.getMonth() - d.getMonth() > 0) {
          return (now.getMonth() - d.getMonth()) + '月前评论'
        } else if (now.getDate() - d.getDate() > 0) {  // getDate  =>  日,   getDay  =>  星期
          return (now.getDate() - d.getDate()) + '日前评论'
        } else if (now.getHours() - d.getHours() > 0) {
          return (now.getHours() - d.getHours()) + '小时前评论'
        } else if (now.getMinutes() - d.getMinutes() > 0) {
          return (now.getMinutes() - d.getMinutes()) + '分钟前评论'
        }
      }
    }
  }
</script>

<style scoped>

</style>
